import { Tabs } from 'antd';
import { ContractManageAPI } from '../common/type';
import pageStyles from '@/common/pageLayout.less';
import { useContext, useEffect, useMemo, useState } from 'react';
import { ConractControllerContext } from '../common';
import { DetailInfoViewTabsMain } from './DetailInfoViewTabsMain';
import { DetailInfoViewTabsModify } from './DetailInfoViewTabsModify';
import { DetailInfoViewTabsBreak } from './DetailInfoViewTabsBreak';
import { DetailInfoViewTabsPayment } from './DetailInfoViewTabsPayment';
import { clickOpenClose, openCloseBtn } from '@/utils/myutilConfig';
import { DetailInfoViewTabsAgree } from './DetailInfoViewTabsAgree';
import { DetailInfoViewBottomBtn } from './DetailInfoViewBottomBtn';
import { readReadShowFileService } from '@/services/BaseLayout';
import { getBaseUrl } from '@/services/urlconst';

export const DetailInfoViewTabs: React.FC<ContractManageAPI.IDetailInfoViewTabs> = ({ tabPaneKeys }) => {
  // /** 轻阅读预览 */
  const { readReadShowFileRun } = readReadShowFileService();

  /**轻阅读预览 */
  const onOpenReadOfdWord = (fieldUrl: string) => {
    readReadShowFileRun({ fieldPath: `${getBaseUrl()}${fieldUrl}` });
    // readReadShowFileRun({ fieldPath: `http://222.186.101.211:20103${fieldUrl}` });
  };

  /** 获取上下文 */
  const { locationState, getDetailInfoRun } = useContext(ConractControllerContext);

  /**保存当前选中Tabs info */
  const [tabsPaneInfoObj, setTabsPaneInfoObj] = useState<Record<string, any>>({
    tabKeyId: '', //合同ID
    tabKeyType: '', //合同类型
  });

  /** 变更记录展开关闭 */
  const [areePaneListOpen, setAreePaneListOpen] = useState<Record<string, any>>({
    allOpenKeys: [],
    openIdKey: [],
  });

  /** 初始化默认选中的key */
  useEffect(() => {
    const activeInfo: Record<string, any> | undefined = tabPaneKeys?.find((item: any) => item?.key == locationState?.id);
    if (locationState?.pageInfo?.pID) {
      setTabsPaneInfoObj({
        tabKeyId: activeInfo?.key,
        tabKeyType: activeInfo?.paneType,
      });
    } else {
      tabPaneKeys?.[0]?.key;
      setTabsPaneInfoObj({
        tabKeyId: tabPaneKeys?.[0]?.key,
        tabKeyType: tabPaneKeys?.[0]?.paneType,
      });
    }
  }, [locationState?.pageInfo, tabPaneKeys]);

  /** 处理返回tab详情 */
  const renderTabsPane = (paneType: string) => {
    switch (paneType) {
      case 'mainPane':
        return <DetailInfoViewTabsMain onOpenReadOfdWord={onOpenReadOfdWord} />;
      case 'modifyPane':
        return <DetailInfoViewTabsModify onOpenReadOfdWord={onOpenReadOfdWord} />;
      case 'breakPane':
        return <DetailInfoViewTabsBreak onOpenReadOfdWord={onOpenReadOfdWord} />;
      case 'agreePane':
        return (
          <DetailInfoViewTabsPayment
            tabsPaneInfoObj={tabsPaneInfoObj}
            allOpenChildren={areePaneListOpen}
            changeOpenChildren={setAreePaneListOpen}
            clickOpenClose={clickOpenClose}
          />
        );
      case 'nodePane':
        return (
          <DetailInfoViewTabsAgree
            tabsPaneInfoObj={tabsPaneInfoObj}
            // allOpenChildren={areePaneListOpen}
            // changeOpenChildren={setAreePaneListOpen}
            // clickOpenClose={clickOpenClose}
          />
        );
      default:
        return <></>;
    }
  };

  /** 切换页面调取详情 */
  useEffect(() => {
    if (tabsPaneInfoObj?.tabKeyId) {
      if (tabsPaneInfoObj?.tabKeyType && tabsPaneInfoObj?.tabKeyType != 'agreePane' && tabsPaneInfoObj?.tabKeyType != 'nodePane') {
        getDetailInfoRun({
          id: tabsPaneInfoObj?.tabKeyId,
        });
      }
    }
  }, [tabsPaneInfoObj]);

  /** 返回tab子页面 */
  const tabsItem = useMemo(() => {
    let items: any[] = [];
    tabPaneKeys?.forEach((item: any) => {
      items?.push({
        label: item?.label,
        key: item?.key,
        children: renderTabsPane(item?.paneType),
      });
    });
    return items;
  }, [tabPaneKeys, tabsPaneInfoObj, areePaneListOpen]);

  /** tabs 标签页操作 */
  const contactsTabsExtra = () => {
    if (tabsPaneInfoObj?.tabKeyType == 'agreePane') {
      return openCloseBtn(areePaneListOpen, setAreePaneListOpen);
    }
    if (tabsPaneInfoObj?.tabKeyType == 'mainPane' || tabsPaneInfoObj?.tabKeyType == 'modifyPane' || tabsPaneInfoObj?.tabKeyType == 'breakPane') {
      return <DetailInfoViewBottomBtn position="top" />;
    }
  };

  return (
    <Tabs
      activeKey={tabsPaneInfoObj?.tabKeyId}
      className={pageStyles['commonTabs']}
      type="card"
      onChange={(activeKey: string) => {
        const activeInfo: Record<string, any> | undefined = tabPaneKeys?.find((item: any) => item?.key == activeKey);
        setTabsPaneInfoObj({
          tabKeyId: activeInfo?.key,
          tabKeyType: activeInfo?.paneType,
        });
        setAreePaneListOpen({
          allOpenKeys: [],
          openIdKey: [],
        });
      }}
      items={tabsItem}
      destroyInactiveTabPane={true}
      tabBarExtraContent={contactsTabsExtra()}
    />
  );
};
